<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学生名单</title>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>班级</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody class="stu_list_box"></tbody>
    </table>

    <script src="./js/jquery-1.10.1.min.js"></script>
    <script>
        $(function () {
            $.get("./stu_list.php", function (data) {
                data = JSON.parse(data);
                // console.log(data);
                var stu_list = '';
                for (var i = 0; i < data.length; i++) {
                    stu_list += `
                        <tr>
                            <td>${data[i].id}</td>
                            <td>${data[i].name}</td>
                            <td>${data[i].sex}</td>
                            <td>${data[i].age}</td>
                            <td>${data[i].class}</td>
                            <td>
                                <a class="edit_btn" href="javascript:;"><sapn>编辑</sapn></a>
                                <a class="del_btn" href="javascript:;"><sapn>删除</sapn></a>
                            </td>
                        </tr>
                    `;
                }
                $('body').find('.stu_list_box').html(stu_list);

                // 修改按钮
                var edit_btn = document.getElementsByClassName('edit_btn');
                for (let i = 0; i < data.length; i++) {
                    // console.log(data[i]);
                    edit_btn[i].onclick = function () {
                        location.href = `./edit_inf.html?id=${data[i].id}`;
                    }
                }

                // 删除按钮
                var del_btn = document.getElementsByClassName('del_btn');
                for (let i = 0; i < data.length; i++) {
                    del_btn[i].onclick = function () {
                        $.post(`./del_stu.php`, {
                            id: data[i].id
                        }, function (data) {
                            console.log(data);
                        });
                    }
                }
            });
        })
    </script>
</body>

</html>